<template>
    <div class="show-all">
      <el-card style="background-color: #3C3F41;width: 80%;margin: 0 auto; border: 5px groove #b15b2e;padding:3px">
        <el-tabs>
        <el-tabs type="card" style="color: #9E9F9F">
        <el-tab-pane>
          <span slot="label" class="show-all-tabs-label ">运行情况</span>
          <el-card style="height: 595px;background-color: #3C3F41;color: #9E9F9F; text-align: center">
            <div slot="header" class="clearfix">
              <span>运行情况</span>
            </div>
             <div style="margin: 10px auto; width: 40%;border: 5px groove #b15b2e;padding:3px">
                <div style=" height: 30px;padding:10px;">
                <span class="config-key">http状态</span>
                <span class="config-value" style="color: #5daf34">正常</span>
              </div>
               <div style=" height: 30px;padding:10px;">
                <span class="config-key">ftp连接状态</span>
                <span class="config-value" style="color: #5daf34">正常</span>
              </div>
               <div style=" height: 30px;padding:10px;">
                <span class="config-key">websocket状态</span>
                <span class="config-value" style="color: #5daf34">正常</span>
              </div>
               <div style=" height: 30px;padding:10px;">
                <span class="config-key">机械臂连接状态</span>
                <span class="config-value" style="color: #5daf34">正常</span>
              </div>
             </div>
          </el-card>
        </el-tab-pane>

        <el-tab-pane>
            <span slot="label" class="show-all-tabs-label ">当前配置</span>
             <el-card style="height: 595px;background-color: #3C3F41;color: #9E9F9F; text-align: center " >
            <div slot="header" class="clearfix">
              <span>当前配置</span>
            </div>
               <div style="margin: 10px auto; width: 40%;border: 5px groove #b15b2e;padding:3px">
                 <div style=" height: 30px;padding:10px;">
                <span class="config-key">点位文件存储位置</span>
                <span class="config-value">./point/</span>
              </div>
                <div style="height: 30px;padding:10px">
                <span class="config-key">生成图片存储位置</span>
                <span class="config-value">./img/</span>
              </div>
                <div style="height: 30px;padding:10px">
                <span class="config-key">校准文件存储位置</span>
                <span class="config-value">./calibration/</span>
              </div>
                  <div style="height: 30px;padding:10px">
                <span class="config-key">ftp服务器地址</span>
                <span class="config-value">192.168.1.5</span>
              </div>
                  <div style="height: 30px;padding:10px">
                <span class="config-key">机械手地址</span>
                <span class="config-value">192.168.1.2</span>
              </div>
                  <div style="height: 30px;padding:10px">
                <span class="config-key">软件后台服务占用端口</span>
                <span class="config-value">8000</span>
              </div>
                  <div style="height: 30px;padding:10px">
                <span class="config-key">软件前台服务占用端口</span>
                <span class="config-value">8080</span>
              </div>

               </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
      </el-tabs>
      </el-card>

    </div>
</template>

<script>
  import Show3DModel from "./Show3DModel";
    export default {
        name: "ShowAll",
        components: {
          Show3DModel,
        },
        data(){
          return{
            wb: null,
            msgList: []
          }
        },
        mounted() {
          this.wb = new WebSocket('ws://127.0.0.1:8000/test/test_ws_srv')
            this.wb.onopen = () => {
              this.wb.send('hello')
            };
            this.wb.onmessage = (e) => {
              let message = JSON.parse(e.data)
              if (message.component === "msgBox" && message.content === "Give me number"){
                this.wb.send(this.msgIndex)
                return true
              }
              if (message.component === "msgBox"){
                this.msgList.push(message)
              }else if (message.component === 'threeD'){
                if (message.content === "unload"){
                  this.$refs.show3d.loading = false
                  return false
                }
                switch(message.code){
                  case 40001:
                    this.$message({
                      type: 'success',
                      message: message.message,
                      showClose: true,
                    });
                   break;
                  case 40002:
                    this.$refs.show3d.jpcLoader(message.content)
                    this.$refs.show3d.loading = false
                    this.isStartScan = false
                    this.msgList.push({
                      'component': 'msgBox',
                      'id': 0,
                      'content': 'Loaded successfully',
                      'msgLevel': 'success',
                      'code': -1,
                    });
                    break;
            }
              }

              this.msgIndex++
            };
        }
    }
</script>

<style scoped>
.show-all {
  background-color: #2B2B2B;
    width: 100% ;
    margin-top: 0px ;
    padding-top: 20px  ;
}
.show-all-tabs-label {
  color: #9E9F9F
}

.show-all-tabs-label:hover {
  color: #b15b2e;
}
.config-key {
  float: left;
}
.config-value {
  float: right;
}
</style>
